<template>
  <div class="fillcontain">
    <el-form :inline="true" size="small">
      <el-form-item label="关键字">
        <el-input v-model="searchForm.key" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button size="mini" type="primary" @click="toSearch">查询</el-button>
          <el-button size="mini" type="success" @click="addMusicFlag=true">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      highlight-current-row
      header-cell-class-name="table-header-class"
      style="width:100%"
      v-loading="loading"
    >
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="albumName" label="专辑名称" align="center">        
        <template scope="scope">
          <div style="color:blue;text-decoration:underline;cursor:pointer;" @click="toAlbumDetail(scope.row.albumId)">{{ scope.row.albumName }}</div>
        </template>
        </el-table-column>
      <el-table-column prop="fileUrl" label="歌曲文件" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.fileUrl" target="_blank" class="buttonText">{{scope.row.filePath}}</a>
      </template>
      </el-table-column>
      <el-table-column prop="timeLengthText" label="歌曲时长" align="center"></el-table-column>
      <el-table-column prop="fileSizeText" label="文件大小" align="center"></el-table-column>
      <el-table-column prop="singerName" label="歌手名称" align="center">        
        <template scope="scope">
          <div style="color:blue;text-decoration:underline;cursor:pointer;" @click="toSingerDetail(scope.row.singerId)">{{ scope.row.singerName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="recommendIndex" label="推荐" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.recommendIndex>0 ? '是' :'否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="mini" type="primary" @click="toEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="success" @click="toRecommend(scope.row.id)" v-if="scope.row.recommendIndex==0">推荐</el-button>
            <el-button size="mini" type="warning" @click="toCancelRecommend(scope.row.id)" v-if="scope.row.recommendIndex>0">取消</el-button>
            <el-button size="mini" type="danger" @click="toDelete(scope.row.id)">删除</el-button>
          </el-button-group>
        </template>warning
      </el-table-column>
    </el-table>
    <el-row class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper, sizes"
        :page-size="page.pageSize"
        :page-sizes="[2,5,10,20,50,100]"
        :total="page.total"
        @current-change="pageChange"
        @size-change="sizeChange"
      ></el-pagination>
    </el-row>

    <!-- 添加歌曲 -->
    <el-dialog title="添加歌曲" :append-to-body="true" :visible.sync="addMusicFlag" width="600px">
      <add-music :addMusicFlag="addMusicFlag" @changeAddMusicFlag="changeAddMusicFlag"></add-music>
    </el-dialog>

    <!-- 编辑歌曲 -->
    <el-dialog title="编辑歌曲" :append-to-body="true" :visible.sync="editMusicFlag" width="600px">
      <edit-music
        :editMusicFlag="editMusicFlag"
        :editId="editId"
        @changeEditMusicFlag="changeEditMusicFlag"
      ></edit-music>
    </el-dialog>
  </div>
</template>

<script>
import * as musicApi from "@/api/musicApi";
import * as recommendApi from "@/api/recommendApi";
import addMusic from "./addMusic";
import editMusic from "./editMusic";
import { request } from "http";
export default {
  data() {
    return {
      page: {
        page: 1,
        pageSize: 10,
        total: 1
      },
      loading: false,
      addMusicFlag: false,
      editMusicFlag: false,
      editId: Number,
      tableData: [],
      searchForm: {},
      allCommand: []
    };
  },
  components: {
    addMusic,
    editMusic
  },
  async mounted() {
    await this.getMusicList();
  },
  methods: {
    getMusicList() {
      return new Promise((resolve, reject) => {
        let requestData = Object.assign({}, this.page, this.searchForm);
        this.loading = true;
        musicApi
          .getMusicList(requestData)
          .then(res => {
            if (res.errorCode == 0) {
              this.page.total = res.totalCount;
              this.tableData = res.data;
            }
            resolve();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    pageChange(page) {
      this.page.page = page;
      this.getMusicList();
    },
    sizeChange(size) {
      this.page.pageSize = size;
      this.getMusicList();
    },
    changeAddMusicFlag(value) {
      this.addMusicFlag = value;
      this.getMusicList();
    },
    changeEditMusicFlag(value) {
      this.editMusicFlag = value;
      this.getMusicList();
    },
    toSearch() {
      this.page.page = 1;
      this.getMusicList();
    },
    toAlbumDetail(id) {
      this.$router.push({ name: "albumMusicDetail", query: { id } });
    },
    toSingerDetail(id) {
      this.$router.push({ name: "singerDetail", query: { id } });
    },
    toEdit(id) {
      this.editId = id;
      this.editMusicFlag = true;
    },
    toCancelRecommend(id) {
        this.$confirm("是否取消推荐该歌曲?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            recommendApi.cancelRecommend({ id }).then(res => {
              this.$message({
                type: "success",
                message: "取消推荐成功!"
              });
              this.getMusicList();
            });
          });
    },
    toRecommend(id) {
          recommendApi.addRecommend({ id }).then(res => {
              this.$message({
                type: "success",
                message: "推荐成功!"
              });
              this.getMusicList();
            });
    },
    toDelete(id) {
      this.$confirm("是否删除该歌曲?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          musicApi.deleteMusic({ id }).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getMusicList();
          });
        });
    }
  }
};
</script>

<style lang="less" scope>
.fillcontain {
  height: calc(100vh - 180px);
  padding: 30px;
  overflow: auto;
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
